<template lang="pug">
  view
    view.status(:style="{position:headerPosition}")
    view.header(:style="{position:headerPosition}")
      view.addr
        view.icon.location
          span.location-text {{ city }}
    view.place
    view.category-list
      scroll-view.left(scroll-y="true" )
        view.row(v-for="(category,index) in categoryList"  :key="category.id"  :class="[index==showCategoryIndex?'on':'']"  @tap="showCategory(index)")
          view.text
            span {{ category.title }}
            view.block
      scroll-view.right(scroll-y="true" )
        view.category(v-for="(category,index) in categoryList"  :key="category.id"  v-show="index==showCategoryIndex")
          view.banner
            image(src="/static/img/common/class.jpg" mode="aspectFill")
          view.list
            view.box(v-for="(box,i) in category.list"  :key="i"  @tap="toCategory(box)")
              image(:src="box.img + $pictureResolution(0, 108)"  webp)
              view.text {{ box.name }}
</template>
<script>
//高德SDK
import amap from '@/common/SDK/amap-wx.js';

export default {
  data() {
    return {
      showCategoryIndex: 0,
      headerPosition: "fixed",
      city: "北京",
      //分类列表
      categoryList: []
    }
  },
  onPageScroll(e) {
    //兼容iOS端下拉时顶部漂移
    if (e.scrollTop >= 0) {
      this.headerPosition = "fixed";
    } else {
      this.headerPosition = "absolute";
    }
  },
  onLoad() {
    this.amapPlugin = new amap.AMapWX({
      //高德地图KEY，随时失效，请务必替换为自己的KEY，参考：http://ask.dcloud.net.cn/article/35070
      key: '7c235a9ac4e25e482614c6b8eac6fd8e'
    });
    //定位地址
    this.amapPlugin.getRegeo({
      success: (data) => {
        if (typeof (data[0].regeocodeData.addressComponent.city) == "string")
          this.city = data[0].regeocodeData.addressComponent.city.replace(/市/g, ''); //把"市"去掉
        else
          this.city = data[0].regeocodeData.addressComponent.province.replace(/市/g, '');

      }
    });

    this.loadCatList();
  },
  methods: {
    loadCatList: function () {
      //var indexNav = this.$SysCache.get("app_index_productlist");
      var indexCat = false;
      if (indexCat) {
        this.categoryList = indexCat;
      } else {
        this.$Request.get(this.$api.home.withChildren).then(res => {
          //
          if (res.code == 200) {
            this.categoryList = [];
            var array = res.data;
            for (var i = 0; i < array.length; i++) {
              //console.log(i,array[i]);
              var item = array[i];
              var data = {
                'id': item.id,
                'title': item.name,
                'banner': 'http://120.55.49.138/ShopMall/static/img/category/banner.jpg',
              }
              var children = array[i].children;
              var list = [];
              for (var j = 0; j < children.length; j++) {

                var itemlist = children[j];
                var datachildren = {
                  'id': itemlist.id,
                  'name': itemlist.name,
                  'img': itemlist.icon,
                }
                list.push(datachildren);
              }
              data.list = list;
              this.categoryList.push(data);
            }

            //this.$SysCache.put("app_index_productlist",res.data,86400);
          }
        })
      }
    },
    //消息列表
    toMsg() {
      uni.navigateTo({
        url: '../../msg/msg'
      })
    },
    //分类切换显示
    showCategory(index) {
      this.showCategoryIndex = index;
    },
    toCategory(e) {
      uni.setStorageSync('catName', e.name);
      uni.navigateTo({
        url: '../../goods/goods-list/goods-list?cid=' + e.id + '&name=' + e.name
      });
    },
    //搜索跳转
    toSearch() {
      uni.navigateTo({
        url: '../../search/index'
      });
    }
  }
}
</script>
<style lang="scss">

.status {
  width: 100%;
  height: 0;
  position: fixed;
  z-index: 10;
  background-color: #fff;
  top: 0;
  /*  #ifdef  APP-PLUS  */
  height: var(--status-bar-height); //覆盖样式
  /*  #endif  */

}

.header {
  width: 92%;
  padding: 0 4%;
  height: 100upx;
  display: flex;
  align-items: center;
  position: fixed;
  top: 0;
  z-index: 10;
  background-color: #fff;
  /*  #ifdef  APP-PLUS  */
  top: var(--status-bar-height);
  /*  #endif  */

  .addr {
    width: 120upx;
    height: 60upx;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    font-size: 28upx;

    .icon {
      height: 60upx;
      margin-right: 5upx;
      display: flex;
      align-items: center;
      font-size: 42upx;
      color: #ffc50a;

      .location-text {
        font-size: 34upx;
        color: #ffc50a;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
    }
  }

  .input-box {
    width: 100%;
    height: 60upx;
    background-color: #f5f5f5;
    border-radius: 30upx;
    position: relative;
    display: flex;
    align-items: center;

    .icon {
      display: flex;
      align-items: center;
      position: absolute;
      top: 0;
      right: 0;
      width: 60upx;
      height: 60upx;
      font-size: 34upx;
      color: #c0c0c0;
    }

    input {
      padding-left: 28upx;
      height: 28upx;
      font-size: 28upx;
    }
  }

  .icon-btn {
    width: 60upx;
    height: 60upx;
    flex-shrink: 0;
    display: flex;

    .icon {
      width: 60upx;
      height: 60upx;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      font-size: 42upx;
    }
  }
}

.place {

  background-color: #ffffff;
  height: 100upx;
  /*  #ifdef  APP-PLUS  */
  margin-top: var(--status-bar-height);
  /*  #endif  */
}

.category-list {
  width: 100%;
  background-color: #fff;
  display: flex;

  .left, .right {
    position: absolute;

    top: 100upx;
    /*  #ifdef  APP-PLUS  */
    top: calc(100upx + var(--status-bar-height));
    /*  #endif  */
    bottom: 0upx;
  }

  .left {
    width: 24%;
    left: 0upx;
    background-color: #f2f2f2;

    .row {
      width: 100%;
      height: 90upx;
      display: flex;
      align-items: center;

      .text {
        width: 100%;

        position: relative;
        font-size: 28upx;
        display: flex;
        justify-content: center;
        color: #3c3c3c;

        .block {
          position: absolute;
          width: 0upx;
          left: 0;
        }
      }

      &.on {
        height: 100upx;
        background-color: #fff;

        .text {
          font-size: 30upx;
          font-weight: 600;
          color: #2d2d2d;

          .block {
            width: 10upx;
            height: 80%;
            top: 10%;
            background-color: #f06c7a;
          }
        }
      }
    }
  }

  .right {
    width: 76%;
    left: 24%;

    .category {
      width: 94%;
      padding: 20upx 3%;

      .banner {
        width: 100%;
        height: 24.262vw;
        border-radius: 10upx;
        overflow: hidden;
        box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.3);

        image {
          width: 100%;
          height: 24.262vw;
        }
      }

      .list {
        margin-top: 40upx;
        width: 100%;
        display: flex;
        flex-wrap: wrap;

        .box {
          width: calc(71.44vw / 3);
          margin-bottom: 30upx;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-wrap: wrap;

          image {
            width: 60%;
            height: calc(71.44vw / 3 * 0.6);
          }

          .text {
            height: 30upx;
            margin-top: 5upx;
            width: 100%;
            display: flex;
            justify-content: center;
            font-size: 26upx;
          }
        }
      }
    }
  }
}

</style>
